<template>
    <div>
        <div class="device-table">
            <div class="handle-header">
                <el-button type="text" @click="showDeviceDialog">选择设备</el-button>
                <el-button :disabled="selectedList.length === 0" class="danger" type="text" @click="handleDeleteDevice(null)"> 批量移除 </el-button>
            </div>
            <BaseTable
                v-if="deviceList && deviceList.length > 0"
                :columns="columns"
                :data="deviceList"
                max-height="500px"
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
                <template #handle="{ scope: { row } }">
                    <BaseButton type="text" color="danger" @click="handleDeleteDevice(row)"> 移除 </BaseButton>
                </template>
            </BaseTable>
        </div>
        <!-- 选择设备弹框表格 -->
        <el-dialog width="860px" :visible.sync="deviceDialogVisible" title="选择设备">
            <DeviceDialog :visible="deviceDialogVisible" :device-list="deviceList" :params="params" @close="deviceDialogVisible = false" @get-list="getDeviceList" />
        </el-dialog>
    </div>
</template>

<script>
import { uniqBy } from 'lodash-es'
import reconfirm from '@/utils/reconfirm'

export default {
    name: 'DevicesSelectTable',
    props: {
        cardList: {
            type: Array,
            default: () => []
        },
        params: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            deviceDialogVisible: false,
            selectedList: [],
            currentIndex: 0,
            columns: Object.freeze([
                {
                    attrs: {
                        type: 'selection'
                    }
                },
                {
                    attrs: {
                        prop: 'number',
                        label: '设备编号',
                        'show-overflow-tooltip': true,
                        width: '200'
                    }
                },
                {
                    attrs: {
                        prop: 'name',
                        label: '设备名称',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'belongPlace',
                        label: '所属位置',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'stake',
                        label: '设备桩号',
                        'show-overflow-tooltip': true,
                        'min-width': '120'
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '120',
                        fixed: 'right'
                    }
                }
            ]),
            deviceList: []
        }
    },
    watch: {
        deviceList: {
            handler() {
                this.$emit('update:list', this.deviceList)
            },
            deep: true
        }
    },
    methods: {
        // 设施列表选择
        handleSelectionChange(val) {
            this.selectedList = val
        },
        // 设施列表批量和单个删除
        handleDeleteDevice(row) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    const selectedList = row ? [row] : this.selectedList
                    this.deviceList = this.filterSeletedArray(selectedList, this.deviceList)
                }
            })
        },
        filterSeletedArray(selectedArr, arr, key = 'id') {
            selectedArr.forEach((item) => {
                arr = arr.filter((m) => m[key] !== item[key])
            })
            return arr
        },
        getDeviceList(val) {
            const arr = this.deviceList.concat(val)
            this.deviceList = uniqBy(arr, 'id')
        },
        showDeviceDialog() {
            this.deviceDialogVisible = true
        },
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.deviceList.splice(index, 1)
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
